<!DOCTYPE html>
<html>
<head>
<title>Neutron Interferometer</title>
</head>
<body>

<canvas id="myCanvas" width="600" height="550" style="border:1px solid #d3d3d3;"></canvas>

<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    
    // Arrow drawing function
    function drawArrow(fromX, fromY, toX, toY) {
        const headlen = 10; // length of head in pixels
        const dx = toX - fromX;
        const dy = toY - fromY;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.lineTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    // Double-headed arrow drawing function
    function drawDoubleArrow(fromX, fromY, toX, toY) {
        const headlen = 8;
        const dx = toX - fromX;
        const dy = toY - fromY;
        const angle = Math.atan2(dy, dx);
        
        ctx.beginPath();
        // Main line
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        
        // Head at 'to' end
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6));
        
        // Head at 'from' end
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(fromX + headlen * Math.cos(angle - Math.PI / 6), fromY + headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(fromX + headlen * Math.cos(angle + Math.PI / 6), fromY + headlen * Math.sin(angle + Math.PI / 6));
        
        ctx.stroke();
    }

    // Coordinates for the interferometer vertices
    const A = { x: 150, y: 250 };
    const B = { x: 300, y: 100 };
    const C = { x: 300, y: 400 };
    const D = { x: 450, y: 250 };

    // Draw interferometer paths
    ctx.beginPath();
    ctx.moveTo(A.x, A.y);
    ctx.lineTo(B.x, B.y);
    ctx.lineTo(D.x, D.y);
    ctx.lineTo(C.x, C.y);
    ctx.lineTo(A.x, A.y);
    ctx.stroke();

    // Draw input and output beams
    drawArrow(50, A.y, A.x, A.y);
    drawArrow(D.x, D.y, 550, D.y);

    // Draw junction markers (crystal planes)
    ctx.beginPath();
    ctx.moveTo(A.x, A.y - 12);
    ctx.lineTo(A.x, A.y + 12);
    ctx.moveTo(B.x, B.y - 12);
    ctx.lineTo(B.x, B.y + 12);
    ctx.moveTo(C.x, C.y - 12);
    ctx.lineTo(C.x, C.y + 12);
    ctx.stroke();

    // Draw magnetic field region (dots) on path AC
    const fieldCenter = { x: 200, y: 300 };
    const dotSpacing = 8;
    const dotRadius = 1.2;
    
    ctx.save();
    ctx.translate(fieldCenter.x, fieldCenter.y);
    ctx.rotate(Math.PI / 4); // Rotate to align with path AC
    
    for (let i = -1.5; i <= 1.5; i++) {
        for (let j = -1.5; j <= 1.5; j++) {
            ctx.beginPath();
            ctx.arc(i * dotSpacing, j * dotSpacing, dotRadius, 0, 2 * Math.PI);
            ctx.fill();
        }
    }
    
    ctx.restore();

    // Draw length 'l' indicator
    const l_start = { x: 180, y: 335 };
    const l_end = { x: 220, y: 375 }; // A line with slope 1, parallel to AC
    drawDoubleArrow(l_start.x, l_start.y, l_end.x, l_end.y);

    // Add labels
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // Variable labels (italic)
    ctx.font = "italic 20px sans-serif";
    ctx.fillText("n", 30, A.y);
    ctx.fillText("l", 170, 360);
    ctx.fillText("B", 220, 280);

    // Point and path labels (regular)
    ctx.font = "20px sans-serif";
    ctx.fillText("A", A.x + 5, A.y - 20);
    ctx.fillText("B", B.x, B.y - 20);
    ctx.fillText("C", C.x, C.y + 20);
    ctx.fillText("D", D.x + 15, D.y);
    
    const mid_BD = { x: (B.x + D.x) / 2, y: (B.y + D.y) / 2 };
    ctx.fillText("1", mid_BD.x + 15, mid_BD.y - 15);
    
    const mid_CD = { x: (C.x + D.x) / 2, y: (C.y + D.y) / 2 };
    ctx.fillText("2", mid_CD.x + 15, mid_CD.y + 15);

    // Figure caption
    ctx.font = "18px sans-serif";
    ctx.fillText("Fig. 4.3", canvas.width / 2, 520);

</script>

</body>
</html>